<template>
  <div class="income-wrap">
    <div class="card-item">
      <div class="card-title">
        专项收入
      </div>
      <div class="card-main desc-wrap">
        <div class="desc-box">
          <p class="desc">当月完成</p>
          <p class="num">{{zhuan_xiang.monthIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">累计完成</p>
          <p class="num">{{zhuan_xiang.sumIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">上年同期</p>
          <p class="num">{{zhuan_xiang.lastIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">同比上年</p>
          <p class="num">{{zhuan_xiang.last_equals}}&nbsp;<span>%</span></p>
        </div>
        <!-- <common-table ref="specialNumbers" :config="specialNumbersConfig" style="height: 100%;margin-top:20px;">
        </common-table> -->
      </div>
    </div>
    <div class="card-item">
      <div class="card-title">
        罚没收入
      </div>
      <div class="card-main desc-wrap">
        <div class="desc-box">
          <p class="desc">当月完成</p>
          <p class="num">{{fa_mo.monthIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">累计完成</p>
          <p class="num">{{fa_mo.sumIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">上年同期</p>
          <p class="num">{{fa_mo.lastIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">同比上年</p>
          <p class="num">{{fa_mo.last_equals}}&nbsp;<span>%</span></p>
        </div>
        <!-- <common-table ref="punishNumbers" :config="punishNumbersConfig" style="height: 100%;margin-top:20px;">
        </common-table> -->
      </div>
    </div>
    <div class="card-item">
      <div class="card-title">
        行政性收费收入
      </div>
      <div class="card-main desc-wrap">
        <div class="desc-box">
          <p class="desc">当月完成</p>
          <p class="num">{{xing_zheng_shou_fei.monthIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">累计完成</p>
          <p class="num">{{xing_zheng_shou_fei.sumIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">上年同期</p>
          <p class="num">{{xing_zheng_shou_fei.lastIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">同比上年</p>
          <p class="num">{{xing_zheng_shou_fei.last_equals}}&nbsp;<span>%</span></p>
        </div>
        <!-- <common-table ref="adminNumbers" :config="adminNumbersConfig" style="height: 100%;margin-top:20px;">
        </common-table> -->
      </div>
    </div>
    <div class="card-item">
      <div class="card-title">
        国有资源使用收入
      </div>
      <div class="card-main desc-wrap">
        <div class="desc-box">
          <p class="desc">当月完成</p>
          <p class="num">{{guo_you_zi_yuan.monthIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">累计完成</p>
          <p class="num">{{guo_you_zi_yuan.sumIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">上年同期</p>
          <p class="num">{{guo_you_zi_yuan.lastIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">同比上年</p>
          <p class="num">{{guo_you_zi_yuan.last_equals}}&nbsp;<span>%</span></p>
        </div>
        <!-- <common-table ref="govNumbers" :config="govNumbersConfig" style="height: 100%;margin-top:20px;">
        </common-table> -->
      </div>
    </div>

    <div class="card-item">
      <div class="card-title">
        政府性住房基金收入
      </div>
      <div class="card-main desc-wrap">
        <div class="desc-box">
          <p class="desc">当月完成</p>
          <p class="num">{{zhu_fang_ji_jin.monthIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">累计完成</p>
          <p class="num">{{zhu_fang_ji_jin.sumIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">上年同期</p>
          <p class="num">{{zhu_fang_ji_jin.lastIncome}}&nbsp;<span>万元</span></p>
        </div>
        <div class="desc-box">
          <p class="desc">同比上年</p>
          <p class="num">{{zhu_fang_ji_jin.last_equals}}&nbsp;<span>%</span></p>
        </div>
<!--        <common-table ref="housingNumbers" :config="housingNumbersConfig" style="height: 100%;margin-top:20px;">
        </common-table> -->
      </div>
    </div>

  </div>
</template>
<script>
  import CommonTable from "@/components/common/common-table.vue";

  import autoScroll from '@/util/autoScroll.js';

  export default {
    name: 'contentTR',
    components: {
      CommonTable
    },
    data() {
      return {
        xing_zheng_shou_fei:{},
        guo_you_zi_yuan:{},
        fa_mo:{},
        zhuan_xiang:{},
        zhu_fang_ji_jin:{},
      }
    },
    mounted() {
      this.getIncomeDetail();
    },
    methods:{
      getIncomeDetail() {
        this.$get(this.$api.getIncomeDetail).then(res => {
          if(res.code == 200) {
            this.xing_zheng_shou_fei = res.data.xing_zheng_shou_fei;
            this.guo_you_zi_yuan = res.data.guo_you_zi_yuan;
            this.fa_mo = res.data.fa_mo;
            this.zhuan_xiang = res.data.zhuan_xiang;
            this.zhu_fang_ji_jin = res.data.zhu_fang_ji_jin;
          }
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  .income-wrap {
    // display: inline-block;
    float: right;
    width: 631px;
    height: 1360px;
  }

  .card-item {
    margin-right: 20px;
    height: 256px;
    margin-bottom: 20px;
  }
  .card-title {
    padding-left: 17px;
  }

  .card-main {
    height: 180px;
    padding: 10px 20px;
    box-sizing: border-box;
  }

  .desc-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .desc-box {
    display: inline-block;

    .desc {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #6BEEFF;
      line-height: 38px;
      text-indent: 0.5em;
    }

    .num {
      width: 275px;
      height: 55px;
      line-height: 55px;
      text-align: center;
      background: url("../../../assets/imgs/v2/income-bg.png") no-repeat;
      background-size: 100%;
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #F6CE12;

      >span {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #EAF4FF;
        line-height: 38px;
      }
    }
  }

</style>
